/**
 * Created by Dalyn on 2017/3/7.
 */
import React from "react";
import Relay from "react-relay";
import { hashHistory } from 'react-router';
import Confirm from "../common/Confirm.js";
import InputBox from "../common/InputBox.js";
import Test from "../common/Test.js";
import ResetUserPwdOneStepMutation from "./mutation/ResetUserPwdOneStepMutation"

export default class Find_pw1 extends React.Component{
    constructor(props) {
        super(props);
        this.style={
            username: {
                width: "236px",
                height: "40px",
                borderColor: "#bbbbbb",
                marginTop: "15px"
            },
            v_code:{
                width: "106px",
                height: "40px",
                borderColor: "#bbbbbb",
            },
            change:{
                width: '60px',
                backgroundColor:"#fff",
                fontSize:"16px",
                color:"#1b3249",
                // marginTop:"16px",
                fontFamily: "Microsoft YaHei"
            },
            next:{
                width: '256px',
                height: '42px',
                backgroundColor:"#1b3249",
                fontSize:"18px",
                color:"#fff",
                marginTop:"16px",
                fontFamily: "Microsoft YaHei"
            }
        }

        this.state={
            // verifycode : ""
            flag:true,
            codehint:''
        }
        this.letter =['A','B','C','D','E','F','B','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
        this.verifycode = ''
        this.phone = ''
        this.isshow = 'none';
    }

    componentWillMount(){

        this.changeVerifyCode()
    }


    touchNext(){
        this.phone = this.refs.phone.state.text;
        let code = this.refs.code.state.text;
        if(this.phone==''){
            this.setState({
                codehint:'*用户名不能为空'
            });
            return;
        }
        if(code==''){
            this.setState({
                codehint:'*验证码不能为空'
            });
            return;
        }
        if(code.toUpperCase()!=this.verifycode){
            this.setState({
                codehint:'*验证码有误'
            });
            return;
        }
        Relay.Store.commitUpdate(
            new ResetUserPwdOneStepMutation({
                phone:this.phone
            }),
            {
              onFailure: () => {
                console.warn('请求失败');
              },
              onSuccess: (response) => {
                  let token = response.resetUserPwdOneStep.data.token;
                  let errorCode  = response.resetUserPwdOneStep.data.errorCode;
                  let value = response.resetUserPwdOneStep.data.value;
                  if(errorCode=='0'){
                      this.setState({
                          codehint:''
                      });
                      hashHistory.push('/find_pw2/'+token+'*'+this.phone)
                  }else{
                      this.isshow = 'block';
                      this.refs.phone.setState({
                          errorhint:value
                      });

                      this.setState({
                          codehint:''
                      });
                  }
              }
            }
        )
    }

    changeVerifyCode(flag){
        let num;
        let verifycode =''
        for(let i = 0;i<=3;i++ ){
            num =  parseInt(26*Math.random());
            verifycode = verifycode+this.letter[num];
        }
        this.verifycode = verifycode;
        this.refs.verifycode && this.refs.verifycode.change([this.verifycode,0,68,40,36]);
        this.setState({
            flag:!flag
        });
    }



    render(){
        return (
            <div style={Style.box}>
                <p style={Style.p}>找回密码</p>
                <InputBox style={this.style.username} defaultvalute="请输入用户名" ref={'phone'}  maxlength={11} errorhint={this.isshow} isloginintext={true}/>
                <div style={{"marginTop":"15px"}} className="clear">

                    <div style={{display:'inline-block',verticelAlign:"center"}}>
                        <InputBox style={this.style.v_code} defaultvalute="请输入验证码" ref={'code'} maxlength={4} isloginintext={true}/>
                    </div>
                    <div className="clear login_testCode">
                        <div style={{display:'inline-block'}}>
                            <Test data={[this.verifycode,0,68,40,36]} ref={'verifycode'} />
                        </div>
                        <div style={{display:'inline-block',verticalAlign:"top"}}>
                            <a onClick={this.changeVerifyCode.bind(this,this.state.flag)}>
                                换一张
                            </a>
                        </div>
                    </div>
                </div>
                <p style={Style.point}>{this.state.codehint}</p>
                <Confirm style={this.style.next} tcontext={'下一步'}
                         touch={this.touchNext.bind(this)}/>
            </div>
        )
    }
}
var Style = {
    box:{
        width:"259px",
        height:"329px",
        margin:"0 auto",
        padding:"10px 0"
    },
    p:{
        height:"18px",
        fontSize:"20px",
        textAlign:"center",
        lineHeight:"18px",
        verticalAlign:"middle",
        padding:"28px 0",
        margin:"0 auto",
        color:"#1b3249",
        fontFamily: "Microsoft YaHei"
    },
    point:{
        float:"left",
        width: "256px",
        height: "13px",
        color:"red",
        textAlign: "left",
        lineHeight: "13px",
        padding: "11px 0",
        margin: "0 auto",
    },
    code:{

    }
};